<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="parking-status-card">
          <div class="card-header">
            <span class="card-title">总车位数</span>
          </div>
          <div class="card-content">
            <span class="total-count">{{ totalSpaces }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="parking-status-card">
          <div class="card-header">
            <span class="card-title">已使用车位</span>
          </div>
          <div class="card-content">
            <span class="used-count">{{ usedSpaces }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="parking-status-card">
          <div class="card-header">
            <span class="card-title">剩余车位</span>
          </div>
          <div class="card-content">
            <span class="remaining-count">{{ remainingSpaces }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="parking-status-card">
          <div class="card-header">
            <span class="card-title">使用率</span>
          </div>
          <div class="card-content">
            <span class="usage-rate">{{ usageRate }}%</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <div class="chart-container">
          <el-card>
            <div slot="header" class="clearfix">
              <span>车位使用情况</span>
            </div>
            <div ref="parkingChart" class="chart"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getParkingInfo } from '@/api/system/grecords.js'

export default {
  name: 'RemainingSpaces',
  data() {
      return {
        totalSpaces: 0,
        usedSpaces: 0,
        remainingSpaces: 0,
        usageRate: 0,
        parkingChart: null
      }
    },
  created() {
    this.getParkingInfo()
  },
  mounted() {
    this.initCharts()
  },
  beforeDestroy() {
      if (this.parkingChart) {
        this.parkingChart.dispose()
      }
    },
  methods: {
    getParkingInfo() {
      // 使用实际API获取数据
      getParkingInfo().then(response => {
        // 根据实际的API响应结构来更新数据
        const parkingData = response.data || {};
        
        // 直接使用API返回的数据
        this.totalSpaces = parkingData.totalSpaces || 500;
        this.usedSpaces = parkingData.usedSpaces || 0;
        this.remainingSpaces = parkingData.remainingSpaces || (this.totalSpaces - this.usedSpaces);
        this.usageRate = parkingData.usageRate || Math.round((this.usedSpaces / this.totalSpaces) * 100);
        
        // 更新图表数据
        this.updateCharts();
      }).catch(error => {
        console.error('获取停车场信息失败:', error);
        // 发生错误时使用默认值
        this.totalSpaces = 500;
        this.usedSpaces = 320;
        this.remainingSpaces = 180;
        this.usageRate = 64;
        this.updateCharts();
      })
    },
    initCharts() {
      // 初始化图表
      this.initParkingChart()
    },
    initParkingChart() {
      const ECharts = require('echarts')
      this.parkingChart = ECharts.init(this.$refs.parkingChart)
      
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '车位使用情况',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: this.usedSpaces,
                name: '已使用',
                itemStyle: { color: '#f56c6c' }
              },
              {
                value: this.remainingSpaces,
                name: '剩余',
                itemStyle: { color: '#67c23a' }
              }
            ]
          }
        ]
      }
      
      this.parkingChart.setOption(option)
    },
    updateCharts() {
      // 更新图表数据
      if (this.parkingChart) {
        this.parkingChart.setOption({
          series: [
            {
              data: [
                {
                  value: this.usedSpaces,
                  name: '已使用',
                  itemStyle: { color: '#f56c6c' }
                },
                {
                  value: this.remainingSpaces,
                  name: '剩余',
                  itemStyle: { color: '#67c23a' }
                }
              ]
            }
          ]
        })
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.parking-status-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  margin-bottom: 15px;
}

.card-title {
  font-size: 14px;
  color: #606266;
}

.card-content {
  text-align: center;
}

.total-count, .used-count, .remaining-count, .usage-rate {
  font-size: 28px;
  font-weight: bold;
}

.total-count {
  color: #409eff;
}

.used-count {
  color: #f56c6c;
}

.remaining-count {
  color: #67c23a;
}

.usage-rate {
  color: #e6a23c;
}

.chart-container {
  height: 300px;
}

.chart {
  width: 100%;
  height: 250px;
}
</style>